此文是愛奇藝無線UED負責人 @愛奇藝_曉生?采訪百度資深用戶界面設計師 @JJ-Ying?后撰寫的文章，這位GUI達人給我們分享了他的設計經(jīng)歷和一些觀點，有許多都是干貨，剛入行的設計師們趕緊來學習一下吧。

JJ-Ying 也曾分享過他的自學過程，想了解的童鞋們可以閱讀這篇：《非科班如何成為UI設計師？》

先介紹下自己吧

大家好~ 我是 JJ Ying。我一直覺得自己在圈里是比較典型的臉熟程度大過實際能力的設計師，只是因為早年 GUI 設計比賽還屈指可數(shù)的時候贏了個獎所以被一些人知曉，其實我也是依舊在設計路上摸索前行的設計熱愛者。目前在百度上海繼續(xù)做著「做一款有人每天用的產(chǎn)品」的夢想。

（GUI Champs 2006?獲獎作品）

曉生：

很榮幸你能接受采訪，08 年我還在讀書，你好像已經(jīng)出名了，也很遺憾錯過一起共事的機會。當時很好奇，一個學物理的會轉行做設計，后來發(fā)現(xiàn)GUI很多設計師都不是科班出身。那早期你是如何學習 GUI 設計的？

JJ-Ying：

其實說「轉行」不是特別精確，哈哈，因為我在物理專業(yè)這條路上幾乎等于沒開始走~

和大部分設計師一樣，早期的 GUI 學習就是依靠各種練習。比起其他行業(yè)，做 GUI 的入門門檻是比較低的，因為設計時使用的專業(yè)軟件比如 Photoshop 上手還是很容易的，一本三流的書或者一些零散的教程就能幫助大家無障礙使用軟件了。

而之后的深入學習，關鍵是如何把這個「術」轉變成「藝」，我自己的經(jīng)驗是這個階段要盡量減少單純的臨摹和練習，最好結合實際項目（沒有正式商業(yè)項目的話也可以自己尋找或者想一個課題），在實踐的時候不是單純想怎么做得好看，而要通過設計去解決一些實際需求。

 

曉生：

作為一名專業(yè)的設計師，你以為自身成功的關鍵是什么呢？

JJ-Ying：

培養(yǎng)并且持續(xù)維持熱情。每個把設計師作為職業(yè)的同學都會多多少少遇到一些問題，可能是市場環(huán)境沒法幫助我們實踐自己想做的東西、可能是工作內容與預期目標有距離、也有可能是覺得自己的付出和收獲不相符。所有這些問題都會一點點磨礪掉我們對設計的熱情。

工作當中要去找到自己的 high 點，保持當時入行的初心。

比如我自己一直的愿望就是設計一些用戶每天會用到的產(chǎn)品，所以經(jīng)常去查找用戶對自己負責的產(chǎn)品的反饋，不管這些反饋是正向的還是負面，知道有人用我設計的東西、care 我做的產(chǎn)品就讓我打心底里更有干勁。

 

曉生：

百度和 HP 這樣的外企，設計氛圍和工作方式有哪些不同呢？

JJ-Ying：

我所待過的這兩個公司差別真的不是一點點，舉個例子吧，我在 HP 參與的第一個正式項目是在我入職之后一年、做完并交付之后 9 個月上市的，而在百度入職之后第二天接到一個需求，第三天完成了初稿，過了個周末第四天調整了一下完成輸出第五天產(chǎn)品就上線了。

互聯(lián)網(wǎng)產(chǎn)品的一大特征就是「快」，快速迭代多次試錯，內部對產(chǎn)品雖然也有長線愿景與目標，但很多時候產(chǎn)品的形態(tài)是根據(jù)用戶的反饋、競品的發(fā)展、產(chǎn)業(yè)的趨勢以及實現(xiàn)的技術快速調整的。而在惠普打印機部門這種做消費類電子的集團里產(chǎn)品生命周期以年計算，3 年乃至 5 年后的設計都會有嚴密的規(guī)劃，因此流程會比較細致，而從軟件到硬件的設計、開發(fā)團隊在世界各地，設計工作中不得不把很多環(huán)節(jié)都文檔化，并且花很多時間在溝通上。

 

曉生：

從你的微博可以看出，視野很廣，經(jīng)常上哪些網(wǎng)站呢？

JJ-Ying：

在博客時代我曾經(jīng)很即可地訂閱了無數(shù)設計博客，但是資源日漸泛濫之后發(fā)覺大家的內容同質化很嚴重，所以后來也放棄 RSS 閱讀器，轉用 Flipboard 去隨意地瀏覽~ 但目前還是有那么幾個網(wǎng)站我是每篇必看的：

Sidebar.io

一個設計鏈接聚合，每天 5 篇左右的精華文章。另外目前剛出現(xiàn)的?Designer News?也是個不錯的設計 Link 聚合網(wǎng)站

Dribbble

雖然這個就像 GUI 設計師的門戶網(wǎng)站，很多人每天都上，但是依然有非常多的朋友問我怎么利用這個網(wǎng)站。上面既沒什么教程又不是滿屏大圖，怎么學習呢？其實大家不必刻意地去找那些細致的 step-by-step 教程，并不是學會了某個技法、某種表現(xiàn)形式怎么實現(xiàn)才叫學習。開拓自己的眼界，看看別人尤其是那些優(yōu)秀的設計師在做些什么在探索些什么對于自己的幫助更大。對于我自己來說，每天上 Dribbble 看大家牛叉作品的一個重要作用是告訴自己這個世界上不管哪個方面都有比我牛x幾百倍的人，而且很多比自己要勤奮很多，我要有危機感。
相關閱讀：
《設計師必讀！玩轉Dribbble終極指南》

Boston

很多紀實攝影的佳作，幫助我以其他人的視角更好地了解這個世界

Brand New

Logo 設計方面最棒的博客了，作者的咨詢十分新鮮，語言十分有趣和犀利

?Beautiful Pixels

被這個網(wǎng)站的介紹騙了不少錢，下了很多華而不實的 App，但總的來說這上面還是有很多設計得不錯的 App 推薦給大家。

 

曉生：

你最喜歡哪些 App 的界面設計呢？為什么？

JJ-Ying：

National Parks

這個拿下了去年 Apple Design Award 的明星 App 在交互和視覺上頗具創(chuàng)新，尤其是動效讓我印象非常深刻。

Jetsetter

也是旅游行業(yè)的一個 App，設計非常簡約，但是同樣動效豐富。特別喜歡他的標題導航欄：始終存在于左上角的圓形在第一層級是產(chǎn)品 Logo 的一部分，轉場的時候承載「菊花」，子頁面中又充當了返回按鈕。這些過程之間的轉場也很自然。

多年前的 Path

?

當那個驚為天人的時間軸界面還沒出現(xiàn)、當國內的互聯(lián)網(wǎng)行業(yè)從業(yè)人員還沒涌入的時候 1.x 版的 Path 還是一個單純的照片分享應用。很懷念當時那個縮略圖都是橫條的設計是因為那時候整個產(chǎn)品使用起來很有「韻律」。主頁面上可以快速瀏覽大量的朋友照片，喜歡的點細條放大，很單純，很美好。

 

曉生：

App 界面設計中字體非常重要，但手機操作系統(tǒng)中中文字體非常有限，如何才能做好中文界面的排版呢？

JJ-Ying：

常聽到朋友們抱怨說現(xiàn)在很多人畫一枚寫實圖標就算是做過界面設計了，其實界面設計中非常重要的一環(huán)是布局和排版，排版的終極目標是讓文字像優(yōu)秀印刷品一樣讓人讀起來愉悅，而布局的終極目標是能梳理清楚界面中的層級關系。

中文字體選擇少，限制多這個現(xiàn)象在移動平臺乃至網(wǎng)頁端短期內都不可能解決，但有時候我覺得這反而對設計師來說是個很好的機會。因為這會讓我們把眼光從字體好看與否轉移到布局本身。當邊界條件比較嚴苛的情況下我們就只能利用最基礎的那些大小、顏色對比、點線面等基礎元素去做設計。

 

曉生：

你最得意的設計作品是什么，是否可以分享下其中的故事？

JJ-Ying：

我想說是我的個人博客圖月志。出于興趣從 06 年開始寫關于界面設計的博客。多年過去了好友鏈接里的 Link 一個個失效但我自己還在堅持。從內容上積淀了一些我自己的觀點，而從設計本身來講也一直作為一個前段技術的實驗田被我翻來覆去得折騰。因為這個這個「產(chǎn)品」的 PM 就是我自己，所以在設計上能很自由地實驗各種新的技術，從以前的 web font 到后來的響應式設計。

 

曉生：

你參與過 WebOS 設計吧？你如何評價它的界面設計？一直認為它的設計可以和iPhone 媲美，可惜商業(yè)方面非常的失敗。

JJ-Ying：

WebOS 在被 HP 收購之后從行政、開發(fā)和設計上一直比較獨立，我沒有直接參與過 WebOS 在手機上的界面設計，但是當 WebOS 還是 HP 一枚重要棋子，打算在 PC、打印機等產(chǎn)品上全線切換 WebOS 的時候參與了一些概念設計。

雖然很多人都對 WebOS 的界面設計記憶猶新、贊不絕口。但是單純從視覺設計上來說我想潑個冷水。我認為他的統(tǒng)一性略有欠缺，iOS 上也有各種「千奇百怪」的采用擬物設計的原生 App，但是當你見到下圖這樣的界面之后馬上就能意識到這是 iOS。而在 WebOS 上各種質感、布局的處理不得不說精美，但缺少一些全局性的視覺線索，這個問題當我們 Team 在嘗試把 WebOS 的界面移植到 HP 其他產(chǎn)品上的時候就突顯出來了。

不過在同硬件的結合上 WebOS 做得非常好，不論是交互上的一些創(chuàng)新操作模式，還是視覺上統(tǒng)領軟硬件的大圓角設計，都是典范。也許這點也是最終導致 WebOS 沒有用到 HP 全線產(chǎn)品上的原因之一，因為他很難去適配其他不是按照 Palm 原有美學理念去設計的其他硬件。

今天碰巧傳來了 WebOS 開源之后又被 LG 收購的消息，如果真的被應用在家電上的話很有可能這個品牌就會被抹去，真是非常可惜啊。

 

曉生：

你如何看待 Metro 風格？個人感覺有些超前，更適合內容型 APP。

JJ-Ying：

在知乎上我曾談到 Metro UI 的風格看起來與眾不同的一部分原因是因為要和市場上已經(jīng)有的成熟產(chǎn)品 iOS 和 Android 做差異化。

當然他也不是完全為了不一樣而不一樣， 往前追溯到第一代 Zune 播放器界面和更早的 Windows XP Media Center 版的一些設計風格就已經(jīng)能看出 Metro 的影子來了，所以微軟是為了和兩大競爭對手產(chǎn)生差異化 而在內部已經(jīng)形成的一些風格上進行了梳理、強化和普遍運用。

很多人認為 Metro 就是 平面化、就是用大字體，其實除了這些外在特征更包含了很多在交互與視覺上的變革。當變革出現(xiàn)時， 用戶熟悉和接受必然需要一個過程，而且個性化強的設計很容易發(fā)生「喜歡的人很喜歡，討厭的人賊討厭」的狀況。再加上配套硬件的不給力，所以 Metro 風格離占領市場還有很多路要走。

第二代 Zune（2007年）：

第一代 Zune（2006年）：

Windows XP Media Center 版（2004年）：

曉生：

作為設計師，會不停的學習和積累知識，比如為了設計好視頻客戶端，會建議我們的設計師學習海報等傳統(tǒng)領域的設計，你有同樣的感受嗎？平時會從哪些地方尋找設計靈感？

JJ-Ying：

設計師尤其是視覺設計師，也包括我自己很容易掉落的一個趨勢（現(xiàn)在貌似流行說閉環(huán)）是「接到需求 > 理解需求 > 找類似產(chǎn)品做參考 > 揉和進需求所需要的品牌特征 > 產(chǎn)出」。其實美是相通的，我的建議是在尋找靈感階段多收集一些和產(chǎn)品無關的內容，甚至可以是一張風景照。當眼光跳出其他人設定好的圈圈之后往往能有不一樣的收獲。

另外很多設計記得可以嘗試「留過夜」，這也是另一種跳出當前思維的方式。

 

曉生：

最近有關注哪些領域的設計，或者在做新的嘗試嗎？

JJ-Ying：

最近對 Motion Design 頗感興趣。在自己的業(yè)余時間和工作中都嘗試把這些更多融入界面當中。

我們的硬件和系統(tǒng)越來越先進之后現(xiàn)在在移動設備和 web 上都已經(jīng)能實現(xiàn)很多細致的轉場動畫了。雖然動畫不是新鮮的東西，但在真是產(chǎn)品當中這些以毫秒計算的短小動效有時候能起到很好的幫助用戶理解界面、減少學習時間。

 

曉生：

每個設計師都有自己的風格，你喜歡哪些風格呢？

JJ-Ying：

視覺設計的風格、包括技術是變化很快的，比如兩年前大家張口閉口都說響應式設計，去年大家都把網(wǎng)頁做成視察滾動的，而現(xiàn)在打開主流設計博客和設計師網(wǎng)站，哪個沒討論過Flat design vs ?skeuomorphism。

我喜歡的風格其實不關乎這些表象，而是其中的「細節(jié)」。

比如流傳了很久的字體 Helvetica，甚至再早一點 Futura，嘗試去了解其中的精巧細節(jié)為什么被作者設計成那樣之后會覺得很了不起，幾十年過去了，我們現(xiàn)在依舊每天使用著他們，最終成就這些經(jīng)典的不是諸如「去個性化」、「幾何形體」這種外在視覺風格，而是細節(jié)。所以我喜歡所有「關注細節(jié)」的設計。

 

曉生：

看到你?Dribbble?上一款 Mac 輸入法面板，設計師自己不是用戶，應該如何去提煉關鍵性元素（比如顏色/字體等）？

很早以前就有過爭論，關于設計師是不是要去嘗試「扮演」用戶以更好地理解產(chǎn)品。視覺設計這方面其實是個部分包含了感性元素的東西，所以要設計出對于某些人群有針對性的產(chǎn)品需要去觀察。

設計都是來源于生活。

每個人的審美也是在日常生活中可以流露出來的。這種觀察需要平時去積累，多接觸不一樣的人多了解他們的生活，并且，多觀察。

 

原文地址：daichuanqing
作者：@愛奇藝_曉生

 
================關于優(yōu)設網(wǎng)================
"優(yōu)設網(wǎng)uisdc.com"是一個分享網(wǎng)頁設計、無線端設計以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊：網(wǎng)頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優(yōu)秀網(wǎng)頁設計 ，歡迎關注獲取網(wǎng)頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網(wǎng)站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設計 微信號：【youshege】優(yōu)設哥的全拼
您也可以通過掃描下方二維碼快速添加：